<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class ="baby">
<svg xmlns="http://www.w3.org/2000/svg" 
	aria-hidden="true" focusable="false"
	 data-prefix="fas" data-icon="baby-carriage" 
	 class="svg-inline--fa fa-baby-carriage fa-w-16"
	  role="img" viewBox="0 0 512 512">
	  <path fill="currentColor" d="M144.8 17c-11.3-17.8-37.2-22.8-54-9.4C35.3 51.9 0 118 0 192h256L144.8 17zM496 96h-48c-35.3 0-64 28.7-64 64v64H0c0 50.6 23 96.4 60.3 130.7C25.7 363.6 0 394.7 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-8.9-1.8-17.2-4.4-25.2 21.6 5.9 44.6 9.2 68.4 9.2s46.9-3.3 68.4-9.2c-2.7 8-4.4 16.3-4.4 25.2 0 44.2 35.8 80 80 80s80-35.8 80-80c0-37.3-25.7-68.4-60.3-77.3C425 320.4 448 274.6 448 224v-64h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM80 464c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm320-32c0 17.6-14.4 32-32 32s-32-14.4-32-32 14.4-32 32-32 32 14.4 32 32z"/></svg>>
<style>
	.baby{
		color:lightpink;
		background:bisque;
		}
		div
{
	width:500px;
	height:500px;
	background:burlywood;
	animation:myfirst 8s;
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 
	
	-moz-animation:myfirst 8s;
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 
	
	/* Firefox */
	-webkit-animation:myfirst 8s; 
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 
	
	/* Safari and Chrome */
	-o-animation:myfirst 8s;
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 

	 /* Opera */

}

@keyframes myfirst
{
	0%   {background:lightgoldenrodyellow;}

	50%  {background:burlywood;}
	100% {background:plum;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:lightgoldenrodyellow;}
	
	50%  {background:burlywood;}
	100% {background:plum;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:lightgoldenrodyellow;}
	
	50%  {background:burlywood;}
	100% {background:plum;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:lightgoldenrodyellow;}
	
	50%  {background:burlywood;}
	100% {background:plum;}
}

div
{
transform: rotate(10deg);
transform-origin:40% 600%;
-ms-transform: rotate(10deg); /* IE 9 */
-ms-transform-origin:40% 600%; /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari and Chrome */
-webkit-transform-origin:40% 600%; /* Safari and Chrome */
}


div:hover {
    width: 150px;
    height: 150px;
    -webkit-transform: rotate(362deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

</style>
</svg></div>
	
	<h1>你看看我，我不仅会变色，我还会转圈哦！</h1>
	</body>
</html>
